/***
 * 
 */
define( [ 'Vue', 'axios' ], function ( Vue, axios ) {
    var defaultTime = function(){
        var now = new Date( new Date().getTime() - 3 * 24 * 60 * 60 * 1000 ) ; 

        var time = "" + now.getFullYear()

        if ( now.getMonth()<9 ) {
            time += "0" + ( now.getMonth() + 1 ) ;
        } else {
            time += now.getMonth() + 1 ;
        }
        if ( now.getDate()<10 ) {
            time += "0" + now.getDate();
        } else {
            time += now.getDate();
        }
        if ( now.getHours()<10 ) {
            time += "0" + now.getHours();
        } else {
            time += now.getHours();
        }
        if ( now.getMinutes()<10 ) {
            time += "0" + now.getMinutes();
        } else {
            time += now.getMinutes();
        }

        return time;
    };

    return Vue.component('graph-data', {
        data : function() {
            return { providers : [] };
        },
        mounted : function () {
            var _this = this;
            axios.get( 'graph-data.json?host=' + _this.$route.query.host +'&port=' +_this.$route.query.port ) .then(function (response) {
                _this.providers = response.data;
                _this.providers.forEach(function(each){
                    each.clear_before_time = defaultTime();
                });
            });
        },
        methods : {
            handleClear : function(){
                // ajax delete
            }
        },
        template : `
            <div>
                <a>GraphData</a>
                <a href="#/">INDEX PAGE</a>
                  <table border="1">
                    <tr>
                        <td><a href="#">#</a></td>
                        <td><a href="#">Type</a></td>
                        <td><a href="#">Host</a></td>
                        <td><a href="#">ApplicationName</a></td>
                        <td><a href="#">From</a></td>
                        <td><a href="#">To</a></td>
                        <td><a href="#">KeyCount</a></td>
                        <td>操作 (Clear Before)</td>
                    </tr>

                    <tr v-for="(item, index) in providers">
                        <td>{{index+1}}</td>
                        <td>{{item.Type}}</td>
                        <td>{{item.Host}}</td>
                        <td>{{item.ApplicationName}}</td>
                        <td>{{item.From}}</td>
                        <td>{{item.To}}</td>
                        <td>{{item.KeyCount}}</td>
                        <td>
                            <input class="clear_before_time" v-model="item.clear_before_time"/>
                            <input type="button" value="清理" @click="handleClear"/>
                        </td>
                    </tr>
            </div>
            `
    });
});